<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双开门的文案工业设计</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        .excel-reader, .pdf-reader {
            width: 45%;
            height: 500px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
            <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div class="excel-reader">
    <div id="excel-container"></div>
    <input type="file" id="excel-file" accept=".xlsx, .xls" onchange="loadExcel(event)">
</div>

<script>
    let hot;

    function loadExcel(event) {
        const file = event.target.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheetName = workbook.SheetNames[0];
            const sheet = workbook.Sheets[sheetName];
            const json = XLSX.utils.sheet_to_json(sheet, { header: 1 });

            const container = document.getElementById('excel-container');
            hot = new Handsontable(container, {
                data: json,
                rowHeaders: true,
                colHeaders: true,
                contextMenu: true,
                manualColumnResize: true,
                manualRowResize: true,
                filters: true,
                dropdownMenu: true,
                licenseKey: 'non-commercial-and-evaluation'
            });
        };

        reader.readAsArrayBuffer(file);
    }
</script>

        <div class="pdf-reader">
            <!-- 这里放置 PDF 阅读器的代码 -->
            <!-- 你可以使用 PDF.js（https://mozilla.github.io/pdf.js/）作为 JavaScript PDF 阅读器 -->
            <!-- 或者使用其他的 PDF 阅读器库 -->
            <!-- 在这个区域你可以加载并展示 PDF 文件 -->
        </div>
    </div>
</body>
</html>
